import '../exam/indexExam.scss'
import { Button, Checkbox, Divider, Form, Input, message, Radio, Space } from 'antd'
import React, { useEffect } from 'react'
import ReactQuill from 'react-quill'
import { useStore } from '../store'
import { http } from '../utils'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

const QuestionShowList = ({ test,
  id,
}) => {
  console.log(test)
  console.log(id)
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)
  function delHtmlTag (item) {
    return item.toString().replace(/<[^>]+>/g, "")//去掉所有的html标记
  }
  let gapRes = test.gap_filling_question_list.map((item, index) => {
    return Object.assign({}, { 'question_number': item.question_number })
  })
  let judgeRes = test.judge_question_list.map((item, index) => {
    return Object.assign({}, { 'question_number': item.question_number })
  })
  let multipartRes = test.multipart_select_question_list.map((item, index) => {
    return Object.assign({}, { 'question_number': item.question_number })
  })
  let shortRes = test.short_answer_question_list.map((item, index) => {
    return Object.assign({}, { 'question_number': item.question_number })
  })
  let singleRes = test.single_select_question_list.map((item, index) => {
    return Object.assign({}, { 'question_number': item.question_number })
  })

  const { userInforStore } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()
  }, [userInforStore])


  const onFinish = async (values) => {
    setLoading(true)
    console.log('Success:', values)
    let gap_filling_answer_list
    let judge_answer_list
    let multipart_select_answer_list
    let short_answer_list
    let single_select_answer_list
    if (values.gap) {
      gap_filling_answer_list = values.gap.map((item, index) => {
        let answer = []
        answer.push(item.answer)
        return { answer, ...gapRes[index] }
      })
    }
    if (values.judge) {
      judge_answer_list = values.judge.map((item, index) => {
        return { ...item, ...judgeRes[index] }
      })
    }
    if (values.multipart) {
      multipart_select_answer_list = values.multipart.map((item, index) => {
        return { ...item, ...multipartRes[index] }
      })
    }
    if (values.short) {
      short_answer_list = values.short.map((item, index) => {
        let answer = delHtmlTag(item.answer)
        return { answer, ...shortRes[index] }
      })
    }
    if (values.single) {
      single_select_answer_list = values.single.map((item, index) => {
        return { ...item, ...singleRes[index] }
      })
    }

    try {
      await http.post(`/app_server/api/v1/pub/paper/answer/push`, {
        course_id: id,
        test_paper_id: test.id,
        user_id: userInforStore.userInfor.id,
        gap_filling_answer_list: gap_filling_answer_list,
        judge_answer_list: judge_answer_list,
        multipart_select_answer_list: multipart_select_answer_list,
        short_answer_list: short_answer_list,
        single_select_answer_list: single_select_answer_list
      })

      setTimeout(() => {
        message.success('提交成功')
        setLoading(false)
        navigate('/student')
      }, 2000)


    } catch (e) {
      message.error(e.response?.data?.message || '交卷失败')
    }
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <Form
      name="test"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >

      {/* 列出单选题 */}
      <p className='session-title-all'>单选题</p>
      {test.single_select_question_list.map((item, index) => {
        return (
          <div key={`单选题${index}`} className='session-content' >
            <div className='session-title'>
              <p className='p-num'>{item.question_number}.</p>
              <p>{item.question_stem}</p>
              <p>({item.score}分)</p>
            </div>
            <div>
              <Form.Item name={['single', index, 'answer']}>
                <Checkbox.Group >
                  <Space direction='vertical'>
                    {item.item.map((p, index) => (
                      <Checkbox value={index} key={index}>{p}</Checkbox>
                    ))}
                  </Space>
                </Checkbox.Group>
              </Form.Item>
            </div>
            <Divider />
          </div>
        )
      })}
      {/* 列出多选题 */}
      <p className='session-title-all'>多选题</p>
      {test.multipart_select_question_list.map((item, index) => {
        return (
          <div key={`多选题${index}`} className='session-content' >
            <div className='session-title'>
              <p className='p-num'>{item.question_number}.</p>
              <p>{item.question_stem}</p>
              <p>({item.score}分)</p>
            </div>
            <div>
              <Form.Item name={['multipart', index, 'answer']}>
                <Checkbox.Group>
                  <Space direction='vertical'>
                    {item.item.map((p, index) => (
                      <Checkbox value={index} key={index}>{p}</Checkbox>
                    ))}
                  </Space>
                </Checkbox.Group>
              </Form.Item>
            </div>
            <Divider />
          </div>
        )
      })}
      {/* 列出判断题 */}
      <p className='session-title-all'>判断题</p>
      {test.judge_question_list.map((item, index) => {
        return (
          <div key={`判断题${index}`} className='session-content'  >
            <div className='session-title'>
              <p className='p-num'>{item.question_number}.</p>
              <p>{item.question_stem}</p>
              <p>({item.score})分</p>
            </div>
            <div>
              <Form.Item name={['judge', index, 'answer']}>
                <Radio.Group>
                  <Radio value={true}>正确</Radio>
                  <Radio value={false}>错误</Radio>
                </Radio.Group>
              </Form.Item>
            </div>
            <Divider />
          </div>
        )
      })
      }
      {/* 列出填空题 */}
      <p className='session-title-all'>填空题</p>
      {test.gap_filling_question_list.map((item, index) => {
        return (
          <div key={`填空题${index}`} className='session-content' >
            <div className='session-title'>
              <p className='p-num'>{item.question_number}.</p>
              <p>{item.question_stem}</p>
              <p>({item.score}分)</p>
            </div>
            <Form.Item name={['gap', index, 'answer']}>
              <Input />
            </Form.Item>
            <Divider />
          </div>
        )
      })
      }
      {/* 列出简答题 */}
      <p className='session-title-all'>简答题</p>
      {test.short_answer_question_list.map((item, index) => {
        return (
          <div key={`简答题${index}`} className='session-content'  >
            <div className='session-title'>
              <p className='p-num'>{item.question_number}.</p>
              <p>{item.question_stem}</p>
              <p>({item.score}分)</p>
            </div>
            <Form.Item name={['short', index, 'answer']}>
              <ReactQuill />
            </Form.Item>
            <Divider />
          </div>
        )
      })
      }
      <Form.Item>
        <Button htmlType='submit' className='submitBtn' type='primary' >交卷</Button>
      </Form.Item>
    </Form>
  )
}
export default QuestionShowList